<!-- 经营分析 -->
<template>
    <div class="business">
        <!-- 主营介绍 -->
        <yn-com-comTitle name="主营介绍"></yn-com-comTitle>
        <div class="table w1021">
            <div class="tableTh tableTr flex">
                <span class="tableTd">主营产品</span>
                <span class="tableTd flex1 orange">{{ business.priPrd }}</span>
            </div>
            <div class="tableTh tableTr flex top">
                <span class="tableTd">主营业务</span>
                <span class="tableTd flex1 orange">{{ business.priBiz }}</span>
            </div>
        </div>
        <!-- 主营构成 -->
        <yn-com-comTitle class="mt15" name="主营构成"></yn-com-comTitle>
        <!-- //时间切换 -->
        <div class="table w1021 major">
            <div class="tableTab">
                <span
                    class="tableBtn"
                    :class="index == 0 ? 'on' : ''"
                    @click="rate(key, $event)"
                    v-for="(val, key, index) in composition"
                    :key="key"
                    >{{ key.substring(0, 10) }}</span
                >
            </div>

            <div class="big_box">
                <!-- //业务切换 -->
                <div class="tab_box">
                    <div class="tableTab tableTab_line">
                        <span
                            class="tableBtn"
                            :class="tabindex == index ? 'on' : ''"
                            @click="tabChange(val, index)"
                            v-for="(val, index) in tabData"
                            :key="index"
                            >{{ val.title }}</span
                        >
                    </div>
                </div>
                <!-- 图表 -->
                <div
                    class="echart_box"
                    :class="{
                        echart_box_2: flagLeng == 2,
                        echart_box_1: flagLeng == 1,
                    }"
                >
                    <!-- 按行业 -->
                    <div class="item_line" v-if="flagList[0]">
                        <div class="echart_item" id="echarts_11"></div>
                    </div>
                    <!-- 按产品 -->
                    <div class="item_line" v-if="flagList[1]">
                        <div class="echart_item" id="echarts_2"></div>
                    </div>
                    <!-- 按地区 -->
                    <div class="item_line" v-if="flagList[2]">
                        <div class="echart_item" id="echarts_3"></div>
                    </div>
                </div>
            </div>

            <div class="tableTh tableTr flex">
                <span class="tableTd w70">分类</span>
                <div style="width: 951px">
                    <div class="tableTr flex">
                        <span class="tableTd w220">主营业务</span>
                        <span class="tableTd w220">
                            主营业务
                            <br />收入（万元）
                        </span>
                        <span class="tableTd w220">
                            占营业收
                            <br />入比重（％）
                        </span>
                        <span class="tableTd w220">
                            主营业务
                            <br />成本（万元）
                        </span>
                        <span class="tableTd w220">
                            占营业成
                            <br />本比重（％）
                        </span>
                        <span class="tableTd w220">
                            主营业务
                            <br />毛利（万元）
                        </span>
                        <span class="tableTd w220">
                            占营业毛
                            <br />利比重（％）
                        </span>
                        <span class="tableTd w220">
                            主营业务
                            <br />毛利率（％）
                        </span>
                    </div>
                </div>
            </div>
            <div
                class="tableTr tableBody top flex"
                v-for="(val, key) in rateData"
                :key="key"
            >
                <span class="orange tableTd w70">{{ key | filterType }}</span>
                <div style="width: 951px">
                    <div
                        class="tableTr flex"
                        :class="index == 0 ? '' : 'top'"
                        v-for="(item, index) in val"
                        :key="item.id"
                    >
                        <span class="orange tableTd w220">{{
                            item.itemName
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.income | filterVal("numberNo")
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.priRvnuPct | filterVal
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.cost | filterVal("numberNo")
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.priCostPct | filterVal
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.grsPrftVal | filterVal("numberNo")
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.grsPrftPct | filterVal
                        }}</span>
                        <span class="orange tableTd w220">{{
                            item.gpRatio | filterVal
                        }}</span>
                    </div>
                </div>
            </div>
            <div
                class="tableNone orange w1021 top"
                v-if="JSON.stringify(composition) == '{}'"
            >
                暂无数据
            </div>
        </div>
    </div>
</template>

<script>
import { getBusiness, number, numberNo } from "../script/api";
import {
    h_option,
    c_option,
    d_option,
    handleLegend_flag1,
    handleLegend,
} from "./businessAnalysisConfig/data";
const handle = (arr) => {
    const obj = {};
    arr.map((item) => {
        if (!obj[item.type]) {
            obj[item.type] = new Array();
        }
        obj[item.type].push(item);
        return item;
    });
    return obj;
};
export default {
    data() {
        return {
            flagLeng: 3,
            flagList: [false, false, false],
            myChart_1: null,
            myChart_2: null,
            myChart_3: null,
            business: {}, //主营介绍
            composition: {}, //主营构成
            rateData: {},
            tabindex: 0,

            s_obj: {
                1: [], //按行业", "按产品", "按地区
                2: [],
                3: [],
            },
            c_obj: {
                1: [], //按行业", "按产品", "按地区
                2: [],
                3: [],
            },
            m_obj: {
                1: [], //按行业", "按产品", "按地区
                2: [],
                3: [],
            },
            tabData: [
                {
                    title: "主营业务收入",
                },
                {
                    title: "主营业务成本",
                },
                {
                    title: "主营业务毛利",
                },
            ],
        };
    },
    // computed: {
    //     flagLeng: function () {
    //         //计算要展示eachrt图表的个数，设置类名
    //         let arr = this.flagList.filter((ele) => {
    //             return ele == true;
    //         });

    //         console.log("arr.length", arr.length);
    //         return arr.length;
    //     },
    // },
    filters: {
        filterType(ops) {
            //1行业，2，产品，3 地区
            return ["按行业", "按产品", "按地区"][ops - 1];
        },
        filterVal(ops, num) {
            if (num == "numberNo") {
                return numberNo(ops, num);
            }
            if (typeof ops == "number") {
                return number(ops, num);
            }
            return ops ? ops : "--";
        },
    },
    mounted() {
        this.getData();
    },
    methods: {
        inte() {
            if (!this.myChart) {
                this.$nextTick(() => {
                    this.myChart = this.$echarts.init(
                        document.getElementById("echarts")
                    );
                    this.myEcharts();
                });
            } else {
                this.$nextTick(() => {});
            }
        },
        tabChange(val, index) {
            this.tabindex = index;
            this.tabindexChange();
        },
        tabindexChange() {
            if (this.tabindex == 0) {
                this.setData(this.s_obj);
            } else if (this.tabindex == 1) {
                this.setData(this.c_obj);
            } else if (this.tabindex == 2) {
                this.setData(this.m_obj);
            }
        },
        setData(data) {
            if (data[1].length > 0) {
                //按行业", "按产品", "按地区
                h_option.series[0].data = data[1];
                this.flagList[0] = true;
            } else {
                if (
                    this.myChart_1 != null &&
                    this.myChart_1 != "" &&
                    this.myChart_1 != undefined
                ) {
                    this.myChart_1.dispose(); //解决echarts dom已经加载的报错
                }
                this.flagList[0] = false;
            }
            if (data[2].length > 0) {
                c_option.series[0].data = data[2];
                this.flagList[1] = true;
            } else {
                if (
                    this.myChart_2 != null &&
                    this.myChart_2 != "" &&
                    this.myChart_2 != undefined
                ) {
                    this.myChart_2.dispose(); //解决echarts dom已经加载的报错
                }
                this.flagList[1] = false;
            }
            if (data[3].length > 0) {
                this.flagList[2] = true;
                d_option.series[0].data = data[3];
            } else {
                if (
                    this.myChart_3 != null &&
                    this.myChart_3 != "" &&
                    this.myChart_3 != undefined
                ) {
                    this.myChart_3.dispose(); //解决echarts dom已经加载的报错
                }

                this.flagList[2] = false;
            }

            console.log("this.flagList===>", this.flagList);
            let num = this.flagList.filter((ele) => {
                return ele == true;
            }).length;
            this.flagLeng = num;
            console.log(this.flagLeng);
            if (num == 3 || num == 2) {
                console.log("num===>", num);
                h_option.legend.formatter = handleLegend;
                c_option.legend.formatter = handleLegend;
                d_option.legend.formatter = handleLegend;
                // h_option.legend.center = ["35%", "50%"];
                // c_option.legend.center = ["35%", "50%"];
                // d_option.legend.center = ["35%", "50%"];
                // h_option.legend.left = 230;
                // c_option.legend.left = 230;
                // d_option.legend.left = 230;
            } else if (num == 1) {
                console.log("num===>", num);
                h_option.legend.formatter = handleLegend_flag1;
                c_option.legend.formatter = handleLegend_flag1;
                d_option.legend.formatter = handleLegend_flag1;
                // h_option.series.center = ["50%", "50%"];
                // c_option.legend.center = ["50%", "50%"];
                // d_option.legend.center = ["50%", "50%"];
                // h_option.legend.left = 230;
                // c_option.legend.left = 230;
                // d_option.legend.left = 230;
            }

            if (this.flagList[0]) {
                this.$nextTick(() => {
                    this.myChart_1 = this.$echarts.init(
                        document.getElementById("echarts_11")
                    );
                    this.myChart_1.setOption(h_option);
                });
            }
            if (this.flagList[1]) {
                this.$nextTick(() => {
                    this.myChart_2 = this.$echarts.init(
                        document.getElementById("echarts_2")
                    );
                    this.myChart_2.setOption(c_option);
                });
            }
            if (this.flagList[2]) {
                this.$nextTick(() => {
                    this.myChart_3 = this.$echarts.init(
                        document.getElementById("echarts_3")
                    );
                    this.myChart_3.setOption(d_option);
                });
            }
        },
        async getData() {
            const res = await getBusiness();
            this.business = res.business;
            this.composition = res.composition;
            const key = Object.keys(res.composition)[0];
            this.rateData = handle(res.composition[key]);
            this.changeRateData();
        },

        changeRateData() {
            this.clearData();
            for (let key in this.rateData) {
                if (key == 1 || key == 2) {
                    let otherData = {
                        itemName: "其他",
                        income: 0,
                        cost: 0,
                        grsPrftVal: 0,
                        priRvnuPct: 0,
                        priCostPct: 0,
                        grsPrftPct: 0,
                        gpRatio: 0,
                    };
                    let predata = [];
                    if (this.rateData[key].length > 7) {
                        this.rateData[key].forEach((item) => {
                            if (
                                predata.length <= 6 &&
                                item.itemName != "其他"
                            ) {
                                predata.push(item);
                            } else {
                                if (item.priCostPct) {
                                    otherData.priCostPct =
                                        otherData.priCostPct + item.priCostPct;
                                }
                                if (item.priCostPct) {
                                    otherData.gpRatio =
                                        otherData.gpRatio + item.gpRatio;
                                }
                                if (item.grsPrftPct) {
                                    otherData.grsPrftPct =
                                        otherData.grsPrftPct + item.grsPrftPct;
                                }

                                if (item.income) {
                                    otherData.income =
                                        otherData.income + item.income;
                                }

                                if (item.cost) {
                                    otherData.cost = otherData.cost + item.cost;
                                }

                                if (item.grsPrftVal) {
                                    otherData.grsPrftVal =
                                        otherData.grsPrftVal + item.grsPrftVal;
                                }
                            }
                        });
                        this.rateData[key] = [...predata, otherData];
                    }
                }

                this.rateData[key].forEach((item) => {
                    this.s_obj[key].push({
                        name: item.itemName,
                        value: item.income ? item.income : 0,
                    });
                    this.c_obj[key].push({
                        name: item.itemName,
                        value: item.cost ? item.cost : 0,
                    });
                    this.m_obj[key].push({
                        name: item.itemName,
                        value: item.grsPrftVal ? item.grsPrftVal : 0,
                    });
                });
            }

            this.tabindexChange();
        },
        clearData() {
            this.flagList[0] = false;
            this.flagList[1] = false;
            this.flagList[2] = false;
            this.s_obj = {
                //主营页面收入
                1: [], //按行业",
                2: [], // "按产品",
                3: [], //"按地区
            };
            this.c_obj = {
                //主营业务成本
                1: [], //按行业", "按产品", "按地区
                2: [],
                3: [],
            };
            this.m_obj = {
                1: [], //按行业", "按产品", "按地区
                2: [],
                3: [],
            };
        },
        //按日期查询
        rate(ops, event) {
            this.remove(event);
            event.target.classList.add("on");
            this.rateData = handle(this.composition[ops]);
            this.changeRateData();
        }, //删除按钮选中效果
        remove(ops) {
            var ele = ops.target.parentNode.children;
            for (let i = 0; i < ele.length; i++) {
                ele[i].classList.remove("on");
            }
        },
    },
};
</script>
<style lang='scss' scoped>
.tableTab_line {
    display: flex;
    justify-content: center;
}
.big_box {
    background: #1a1a1f;
    border: 1px solid #000000;
    padding-top:10px;
   
}
.echart_box {
    margin-top:30px;
    width: 2021px;
    display: flex;
    width: 100%;
    background: #1a1a1f;
    .item_line {
        width: 340px;
        text-align: center;
        .title {
            color: #cccccc;
            font-size: 16px;
            font-family: Microsoft YaHei;
        }
        .echart_item {
            width: 100%;
            height: 320px;
            // border: 1px solid red;
           
        }
    }
}

.echart_box_2 {
    .item_line {
        width: 500px;
        .echart_item {
            margin-left: 90px;
            width: 340px;
            height: 320px;
            // border: 1px solid red;
           
        }
    }
}

.echart_box_1 {
    .item_line {
        width: 500px;
        .echart_item {
            margin-left: 326px;
            width: 370px;
            height: 320px;
            // border: 1px solid red;
           
        }
    }
}
</style>